<template>
    <div class="container">
      <el-page-header @back="goBack" content="订单日志"></el-page-header>
      <el-row type="flex" justify="space-between" class="nav-bar">
        <el-col class="text-right">
          <el-form ref="form" :inline="true" label-width="auto" class="nav-bar-form">
            <el-form-item label="日期">
              <el-date-picker type="date" placeholder="选择日期" v-model="search.date"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
           <el-form-item label="动作类型">
                <el-select v-model="value" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关键字">
              <el-input placeholder="以姓名/中文表名检索" v-model="search.key"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column fixed prop="createusername" label="操作人" width="100">
        </el-table-column>
        <el-table-column fixed prop="type" label="动作" width="100">
        </el-table-column>
        <el-table-column prop="createdatetime" label="操作时间" width="160">
        </el-table-column>
        <el-table-column prop="ctablename" label="中文表名" width="200">
        </el-table-column>
        <el-table-column prop="etablename" label="英文表名" width="200">
        </el-table-column>
        <el-table-column prop="zhcolumnname" label="中文字段名" width="150">
        </el-table-column>
        <el-table-column prop="columnname" label="字段名" width="150">
        </el-table-column>
        <el-table-column prop="currentvalue" label="当前值"  >
        </el-table-column>
        <el-table-column prop="originalvalue" label="原始值"  >
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
          :page-size="search.PageSize" :current-page="search.PageIndex" @current-change="pageChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
    export default {
      layout: 'admin',
      head() {
        return {
          title: '订单日志' ,
        }
      },
      data() {
        return {
          loading: false,
          total: 0,
          search: {
            date:'',
            logtype:'',
            key: '',
            PageIndex: 1,
            PageSize: 10,
            order: [{
              Column: 'createddatetime',
              IsDesc: true
            }]
          },
          tableData: [],
          options:[
            {value:'新增',lable:'新增'},
            {value:'删除',lable:'删除'},
            {value:'编辑',lable:'编辑'},
          ],
          value:'',
        }
      },
     watch: {
       value(newValue, oldValue) {
         this.search.logtype=newValue;
         this.getList();
       },
       'search.date'(){
         //this.search.TypeIds=newValue;
         this.getList();
       }
     },
      mounted() {
        this.getList()
      },
      methods: {
        goBack() {
          this.$router.go(-1)
        },
        searchData() {
          this.search.PageIndex = 1;
          this.search.PageSize = 10;
          this.getList();
        },
        getList() {
          this.loading = true
          // this.$axios.post('/enterprise/LogList', this.search).then((res) => {
          //   this.loading = false
          //   this.tableData = res.rows;
          //   this.total = res.total;
          // }).catch((err) => {
          //   this.loading = false;
          // })
        },
        pageChange(e) { // 页码切换事件
          this.search.PageIndex = e;
          this.getList();
        },
        handleSizeChange(val) {
          this.search.PageIndex = 1;
          this.search.PageSize = val;
          this.getList();
        },
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .nav-bar {
      padding: 15px 0 0;
    }
  
    .send {
      margin-top: 15px;
      margin-right: 10px;
    }
  
    .dialogForm {
      display: flex;
      flex-wrap: wrap;
  
      .el-form-item {
        width: 50%;
        float: left;
  
        &.all {
          width: 100%;
        }
  
        .el-select {
          width: 100%;
        }
      }
    }
  
    .type-state {
      display: flex;
      padding: 30px 0 0;
      width: 100%;
      border-bottom: 2px solid var(--light);
      margin-bottom: 10px;
  
      span {
        color: var(--gray);
        margin-right: 40px;
        position: relative;
        height: 35px;
        cursor: pointer;
  
        &.on {
          color: #000;
  
          &:after {
            content: '';
            width: 100%;
            height: 2px;
            background: var(--red);
            position: absolute;
            bottom: -2px;
            left: 0;
          }
        }
      }
    }
  
    .send-msg-box {
      &>div {
        padding-bottom: 15px;
        border-bottom: 1px dashed #dbdbdb;
        margin-bottom: 15px;
      }
    }
  
    .signet-list {
      display: flex;
      flex-wrap: wrap;
  
      // align-items: center;
      // justify-content: center;
      .con {
        cursor: pointer;
  
        &.on .img {
          border: 2px solid var(--blue);
          box-sizing: border-box;
        }
  
        position: relative;
        margin-right: 15px;
        margin-bottom: 15px;
        margin-left: 15px;
  
        .img {
          width: 198px;
          height: 198px;
          display: block;
          border: 1px solid #f1f1f1;
        }
  
        .title {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 35px;
          color: #fff;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.8);
          line-height: 35px;
        }
      }
    }
  
    .contract-details {
  
      .contract-head {
        display: flex;
  
        .item {
          flex: 1;
  
          .tl {
            font-size: 12px;
            color: var(--gray);
          }
  
          .text {
            font-size: 14px;
          }
        }
      }
  
      .iframe-item {
        flex: 1;
      }
  
      .text-item {
        width: 400px;
        padding: 0 30px 30px 30px;
  
        .record-content {
          // height: 745px;
          overflow-y: auto;
        }
      }
  
      .contract-foot {
        width: 215px;
        // height: 800px;
        overflow: auto;
        padding-left: 15px;
  
        .choose-view {
          padding: 30px 0;
          display: flex;
          flex-wrap: wrap;
  
          .item {
            width: 160px;
            height: 210px;
            text-align: center;
            box-shadow: 0 0 6px #ccc;
            position: relative;
            margin-right: 15px;
            margin-bottom: 50px;
            cursor: pointer;
            background-size: cover;
            background-position: 0 0;
  
            .con {
              display: block;
              height: 100%;
              background-size: contain;
              background-position: center;
            }
  
            .title {
              width: 100%;
              height: 20px;
              line-height: 20px;
              font-size: 18px;
              color: #000 !important;
              position: absolute;
              top: 30px;
              left: 0;
            }
  
            .state {
              height: 30px;
              // line-height: 30px;
              position: absolute;
              bottom: -40px;
              width: 100%;
  
              &.warning {
                color: var(--warning);
              }
  
              &.danger {
                color: var(--danger);
              }
  
              &.success {
                color: var(--success);
              }
            }
  
            .icon-box {
              margin-bottom: 10px;
              position: relative;
              margin-top: 15px;
  
              .add-ico {
                width: 64px;
                height: 64px;
                display: block;
                margin: 100px auto 0;
                color: #d3d3d3;
                font-size: 70px;
                font-weight: initial;
              }
            }
          }
        }
      }
    }
  </style>
  